﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../common/jquery.js"></script>
    <style type="text/css">
        .even
        {
            color: firebrick;
            background: wheat;
            width: 20%;
        }
        .odd
        {
            color: navy;
            background: lightgray;
            width: 20%;
        }
    </style>
    <script type="text/javascript">
        function sample1() {
            var counter = 0;
            var ol = $("#sample1 ol");

            $("#sample1 button").click(function () {
                ++counter;
                $("<li></li>", {
                    text: "item " + counter,
                    "class": counter % 2 == 0 ? "even" : "odd"
                }).appendTo(ol);
            });
        }

        $(function () {
            sample1();
        });

    </script>
</head>
<body>
    <div id="sample1">
        <button>
            Append</button>
        <ol>
        </ol>
    </div>
</body>
</html>
